<template>
    <td class="detail" @mouseenter="showIt(index,item)" @mouseleave="hide(index)">
        <p style="vertical-align:top;box-sizing: border-box;padding-bottom:5px">......</p>
        <div class="detail_warp">
            <div :class="index>20?'last_detail':'detal_tabel'">
                <div class='owner'>
                    <span>MAC：{{item.mac ? item.mac : '-'}}</span>
                    <span>备注：{{item.description ? item.description : '-'}}</span>
                </div>
                <div v-show='!detailshow' style="position: relative;height: 100px;background:#fff;z-index: 20;width: 456px;">
                    <loading ></loading>
                </div>
                <table v-show='detailshow'>
                    <thead>
                        <tr>
                            <th style="width: 60px;">序号</th>
                            <th>虚拟IP</th>
                            <th>变换时间</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="(val,i) in detailDatas">
                            <td>{{i+1}}</td>
                            <td>{{val.vip ? val.vip : '-'}}</td>
                            <td>{{val.time ?val.time : '-'}}</td>
                        </tr>
                    </tbody>																		
                </table>
            </div>	
            <img  src="../../../../img/toright.png" />
        </div> 
    </td>
</template>
<script>
	import loading from 'components/common/loading'
	import logManageService from 'services/logManageService'
	export default {
		components:{
		    loading,
	    },
		data() {
			return{
				detailDatas:[],
				detailshow:false,
				moveTime:'',
				editStatus:-1
			}
		},
		methods: {
			editindex(index) {
				this.editStatus=index
			},
			resetEditIndex(index) {
				this.editStatus=index
				if (index==-1) {
					this.$emit('getData')
				}
			},
			showIt(index,item) {
				clearTimeout(this.moveTime)
				this.moveTime = setTimeout(()=>{				
					this.recvDetailDate(item)
					$('.detail_warp').eq(index).fadeIn(200)					
				},200)	
							
			},
			recvDetailDate(item) {
				item.type='host_detail'
				this.detailshow = false
				logManageService.getTerminalLog(item)
				.then((res)=>{
					
					if (res.errcode === 0) {
						this.detailshow = true
						this.detailDatas=res.data.detail
					}
				})
			},
			hide(index) {					
				clearTimeout(this.moveTime)
				$('.detail_warp').eq(index).fadeOut(200)
			}
		}
	}
</script>